<template>
  <!-- 移除原有layout结构 -->
  <div class="grid-container">
     <!-- <n-button v-if="userdata.role_num === '999'" size="medium" color="#63d689" @click="isShowUploadDrawRight">
        <template #icon> <n-icon size="20"> <CloudUpload /> </n-icon> </template>
        <span style="font-size: 16px; font-weight: bolder">&nbsp;上传回忆</span>
      </n-button> -->
      <n-button size="medium" color="#63d689" @click="isShowUploadDrawRight">
        <template #icon> <n-icon size="20"> <CloudUpload /> </n-icon> </template>
        <span style="font-size: 16px; font-weight: bolder">&nbsp;上传回忆</span>
      </n-button>
    <n-grid cols="1" rows="auto 1fr" :style="{ height: '100vh' }" >


      <!-- 顶部区域 -->
      <!-- <n-gi>
        <n-card>
          <BackgroundPlate title="回忆录" description="" color="#546e7a"></BackgroundPlate>
        </n-card>
      </n-gi> -->


      
      <!-- 主内容区 -->
      <n-gi>
        <n-grid cols="24" :x-gap="16" :style="{ height: '100%' }">
          <!-- 侧边栏 (可选) -->
          <!-- <n-gi :span="4" v-if="true">
            <n-card class="sidebar">侧边栏内容</n-card>
          </n-gi> -->



          <!-- 主内容 -->
          <n-gi :span="false ? 20 : 24">
            <n-card class="main-content">
              <n-tabs
                type="line"
                animated
                v-model:value="activeTab"
                @update:value="handleTabChange"
                @click="handleTabClick"
                class="full-height-tabs"
               >

               <n-tab-pane 
                v-for="tab in tabs" 
                :key="tab.name"
                :name="tab.name"
                :title="tab.name"
                style="height: 100%;"
                >

                <!-- 选中Tab提示内容显示提示内容 -->
                <template #tab>
                  <n-tooltip trigger="hover" placement="top">
                    <template #trigger>
                      <span class="tab-label">{{ tab.label }}</span>
                    </template>
                    {{ tab.tooltip }}
                  </n-tooltip>
                </template>


                <!-- 手机端显示 -->
                <div v-if="!isPC && isShowPhotoList" class="mobile-content">
                  <div class="content-container">
                    <n-infinite-scroll  :distance="9" @load="handleMobileScrollEnd">
                      <div class="scroll-wrapper">
                        <div v-for="(imgdata,index) in iosImgData"  :key="index">
                          <MemeryCenter
                            :imgdata="imgdata"
                            v-motion-pop
                            v-motion-pop-visible-once
                            >
                          </MemeryCenter>
                          <br/>
                        </div>
                      </div>
                    </n-infinite-scroll>
                  </div>
                  
                </div>





                <!-- 浏览器端 显示 -->
                <n-carousel
                  show-arrow 
                  autoplay 
                  mousewheel
                  v-show="isPC && isShowPhotoList"
                  show-dot="false"
                  class="centered-carousel"
                  @update:current-index="handleIndexChange"
                >
                  <img 
                    v-for="item in pcImgData" 
                    :key="item.id"
                    class="carousel-img"
                    :src="item.imgMinioRrl"
                    :alt="`图片${item.imgTitle}`"
                  >
                  <template #arrow="{ prev, next }">
                    <div class="custom-arrow">
                      <button type="button" class="custom-arrow--left" @click="prev">
                        <n-icon><ArrowBack /></n-icon>
                      </button>
                      <button type="button" class="custom-arrow--right" @click="next">
                        <n-icon><ArrowForward /></n-icon>
                      </button>
                    </div>
                  </template>
                  <template #dots="{ pcImgDataTotal, currentIndex, to }">
                    <ul class="custom-dots">
                      <li
                        v-for="index of pcImgData.length || pcImgDataTotal"
                        :key="index"
                        :class="{ ['is-active']: currentIndex === index - 1 }"
                        @click="to(index - 1)"
                      />
                    </ul>
                  </template>
                </n-carousel>

                <div v-if="loadingMemeryMask" class="upload-loading-mask">
                  <n-spin size="large">
                    <template #description>
                      <n-gradient-text type="success" style="font-size: 18px">
                        回 忆 检 索 中 . . . 
                      </n-gradient-text>
                    </template>
                  </n-spin>
                </div>



              </n-tab-pane>

              </n-tabs>
            </n-card>
          </n-gi>
        </n-grid>
      </n-gi>
    </n-grid>



  


  </div>

  <!-- 回忆上传抽屉 -->
  <n-drawer v-model:show="active" :width="clientWidth*0.88">
    <n-drawer-content>
            
      <template #header>
        <n-icon size="30" color="Yellow"><BalloonOutline /></n-icon>
        <n-icon size="30" color="Cyan"><BalloonOutline /></n-icon>
        <n-icon size="30" color="Magenta"><BalloonOutline /></n-icon>
        <n-icon size="30" color="Lime"><BalloonOutline /></n-icon>
        <n-gradient-text
          :size="25"
          type="success"
          gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"
         >
          上传回忆片段
        </n-gradient-text>
        <n-icon size="30" color="Aqua"><BalloonOutline /></n-icon>
        <n-icon size="30" color="Orange"><BalloonOutline /></n-icon>
        <n-icon size="30" color="Chartreuse"><BalloonOutline /></n-icon>
        <n-icon size="30" color="HotPink"><BalloonOutline /></n-icon>
      </template>

      <!-- 调整表单的大小 -->
      <n-radio-group
        v-model:value="formInputSize"
        name="left-size"
        style="
          margin-bottom: 12px; 
          margin-top: 20px; 
          display: flex; 
          justify-content: center; 
          align-items: center; 
          gap: 0px;
        "
       >
        <n-radio-button value="small"> 小 </n-radio-button>
        <n-radio-button value="medium"> 中 </n-radio-button>
        <n-radio-button value="large"> 大 </n-radio-button>
      </n-radio-group>


      <n-form
        ref="formRef"
        :label-width="80"
        :model="uploadMemeryForm"
        :rules="rules"
        :size="formInputSize"
       >
        <n-form-item label="图片标题" path="imgTitle">
          <n-input v-model:value="uploadMemeryForm.imgTitle" placeholder="请输入图片标题" />
        </n-form-item>
        <n-form-item label="图片描述" path="ingDescription">
          <n-input v-model:value="uploadMemeryForm.ingDescription" placeholder="请输入图片描述" />
        </n-form-item>
        <n-form-item label="图片标签" path="imgTags">
          <n-select
            v-model:value="imgTagsValues"
            :options="imgTagOptions" filterable clearable
          />
        </n-form-item>
        <!-- <n-form-item label="图片文案未选择" path="imgLetterUnchk">
          <n-select
            v-model:value="uploadMemeryForm.imgLetterUnchk"
            :options="imgLetterUnchkOptions" filterable clearable
          />
        </n-form-item>
        <n-form-item label="图片文案已选择" path="imgLetterChk">
          <n-select
            v-model:value="uploadMemeryForm.imgLetterChk"
            :options="imgLetterChkOptions" filterable clearable
          />
        </n-form-item>
        <n-form-item label="点赞数" path="imgLike">
          <n-input-number v-model:value="uploadMemeryForm.imgLike" style="width: 100%"/>
        </n-form-item>
        <n-form-item label="评论数" path="imgComment">
          <n-input-number v-model:value="uploadMemeryForm.imgComment" style="width: 100%"/>
        </n-form-item>
        <n-form-item label="浏览数" path="imgScan">
          <n-input-number v-model:value="uploadMemeryForm.imgScan" style="width: 100%"/>
        </n-form-item> -->
        <n-form-item label="上传图片">
          <n-upload
              ref="imgUploadRef"
              list-type="image-card"
              :max="1"
              @remove="handleRemove"
              :file-list="avatarFiles"
              @change="handleFileChange"
            >
              <n-upload-dragger>
                <div class="upload-tips">
                  <n-icon size="40" depth="3"><ArchiveIcon /></n-icon><br/><br/>
                  <n-text depth="3" style="font-size: 20px;">点击或拖拽</n-text><br/>
                  <n-p depth="3" style="margin: 0 0; font-size: 20px;">勿传敏感信息</n-p>
                </div>
              </n-upload-dragger>
              
              <template #file="{ file }">
                <n-image
                  :src="file.url"
                  :alt="file.name"
                  width="300"
                  height="300"
                  object-fit="cover"
                  preview-disabled
                >
                  <template #placeholder>
                    <n-spin size="large" />
                  </template>
                </n-image>
              </template>
            </n-upload>
        </n-form-item>
      </n-form>

      <template #footer>
        <n-button
        size="medium" 
          color="#63d689"  
          @click="uploadImg"
          :loading="isDrawerLoading"
          :disabled="isDrawerLoading"
         >
          <template #icon>
            <n-icon size="20"> <CloudUpload /> </n-icon>
          </template>
          <span style="font-size: 16px; font-weight: bolder">&nbsp;确认上传</span>
        </n-button>


        <!-- <n-button size="medium" color="#63d689" @click="getImgListData">
          <template #icon> <n-icon size="20"> <CloudUpload /> </n-icon> </template>
          <span style="font-size: 16px; font-weight: bolder">&nbsp;获取列表</span>
        </n-button> -->


      </template>
      <div v-if="isDrawerLoading" class="upload-loading-mask">
        <n-spin size="large">
          <template #description>
            <n-gradient-text type="success" style="font-size: 18px">
              正在上传回忆...
            </n-gradient-text>
          </template>
        </n-spin>
      </div>
    </n-drawer-content>
  </n-drawer>

  
  
</template>

<script setup lang="ts">
// 在组件脚本顶部手动导入组件
// @ts-ignore
import { NInfiniteScroll,useMessage,NTabs, NTabPane, NDialog,
  FormInst, FormItemInst, FormItemRule, FormRules, UploadFileInfo
}  from 'naive-ui'
import { computed,inject,ref,reactive,watch,nextTick,onMounted, onUnmounted } from 'vue'
import { WomanSharp, LogoWechat,ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
// @ts-ignore
import BackgroundPlate from '@/components/background/BackgroundPlate.vue'
import { VaeStore } from "../store";
import { Starport } from "vue-starport";
import { storeToRefs } from "pinia";
import { ArrowBack, ArrowForward, CloudUpload,BalloonOutline } from '@vicons/ionicons5'
// @ts-ignore
import MemeryCenter from '.././components/Memery/MemeryCenter.vue'
const message=useMessage();
import request from '@/utils/request'
import type { BaseResponse } from "@/types/request";
import {setCookies,storage} from '../utils/auth'
const store = VaeStore();
const {  
  isPC, 
  clientWidth,  
  distanceToBottom,  
  distanceToTop,  
  isdarkTheme, 
  clientHeight, 
  activeKey, 
  appleToken, 
  userInfo 
} = storeToRefs(store);
// 滚动条控制
const scrollBy = inject<Function>('scrollBy');
scrollBy?.(0)

// 响应式布局计算
const layoutHeight = computed(() => {
  // 根据实际布局结构调整扣除的像素值
  const clientHeight = 30 // 假设头部高度为60px
  return `calc(100vh - ${clientHeight}px)`
})

// 回忆加载 loading
const loadingMemeryMask = ref(false)


const imgLetterUnchkOptions = [ { label: '月光轻吻湖面碎银闪闪', value: '月光轻吻湖面碎银闪闪' }, { label: '雨滴奏响荷叶的乐章', value: '雨滴奏响荷叶的乐章' }, { label: '海浪追逐沙滩的足迹', value: '海浪追逐沙滩的足迹' }, { label: '枫叶晕染秋日的山峦', value: '枫叶晕染秋日的山峦' }, { label: '繁星镶嵌夜空的画卷', value: '繁星镶嵌夜空的画卷' }, { label: '蒲公英飘向远方天际', value: '蒲公英飘向远方天际' }, { label: '晨雾笼罩静谧的湖面', value: '晨雾笼罩静谧的湖面' }, { label: '萤火虫点亮夏夜的梦', value: '萤火虫点亮夏夜的梦' }, { label: '海风吹拂贝壳的歌谣', value: '海风吹拂贝壳的歌谣' }, { label: '落叶铺就大地的诗笺', value: '落叶铺就大地的诗笺' }, { label: '咖啡香唤醒沉睡的清晨', value: '咖啡香唤醒沉睡的清晨' }, { label: '画笔勾勒梦想的轮廓', value: '画笔勾勒梦想的轮廓' }, { label: '茶香弥漫午后的时光', value: '茶香弥漫午后的时光' }, { label: '脚步丈量世界的广阔', value: '脚步丈量世界的广阔' }, { label: '书页翻动知识的海洋', value: '书页翻动知识的海洋' }, { label: '运动挥洒青春的汗水', value: '运动挥洒青春的汗水' }, { label: '音乐奏响生活的旋律', value: '音乐奏响生活的旋律' }, { label: '旅行邂逅未知的风景', value: '旅行邂逅未知的风景' }, { label: '微笑化解生活的难题', value: '微笑化解生活的难题' }, { label: '劳作收获丰收的喜悦', value: '劳作收获丰收的喜悦' }, { label: '思念在月光下蔓延生长', value: '思念在月光下蔓延生长' }, { label: '目光交汇心动的瞬间', value: '目光交汇心动的瞬间' }, { label: '眼泪诉说心底的悲伤', value: '眼泪诉说心底的悲伤' }, { label: '牵手走过漫长的岁月', value: '牵手走过漫长的岁月' }, { label: '情书承载炽热的爱意', value: '情书承载炽热的爱意' }, { label: '争吵打破平静的湖面', value: '争吵打破平静的湖面' }, { label: '等待在时光中默默煎熬', value: '等待在时光中默默煎熬' }, { label: '誓言回荡在岁月的长廊', value: '誓言回荡在岁月的长廊' }, { label: '陪伴是最长情的告白', value: '陪伴是最长情的告白' }, { label: '梦想在挫折中熠熠生辉', value: '梦想在挫折中熠熠生辉' }, { label: '精灵在花丛中翩翩起舞', value: '精灵在花丛中翩翩起舞' }, { label: '巨龙在云端肆意翱翔', value: '巨龙在云端肆意翱翔' }, { label: '魔法在森林中悄然苏醒', value: '魔法在森林中悄然苏醒' }, { label: '独角兽漫步神秘森林', value: '独角兽漫步神秘森林' }, { label: '女巫调制神奇的药水', value: '女巫调制神奇的药水' }, { label: '时空之门缓缓地开启', value: '时空之门缓缓地开启' }, { label: '星星弹奏宇宙的乐章', value: '星星弹奏宇宙的乐章' }, { label: '雪人讲述冬日的童话', value: '雪人讲述冬日的童话' }, { label: '萤火虫传递神秘信号', value: '萤火虫传递神秘信号' }, { label: '仙子洒下希望的光芒', value: '仙子洒下希望的光芒' }, { label: '风筝追逐天边的云朵', value: '风筝追逐天边的云朵' }, { label: '弹珠碰撞童年的欢乐', value: '弹珠碰撞童年的欢乐' }, { label: '泡泡飘向蔚蓝的天空', value: '泡泡飘向蔚蓝的天空' }, { label: '气球飞向遥远的星河', value: '气球飞向遥远的星河' }, { label: '水枪激战夏日的清凉', value: '水枪激战夏日的清凉' }, { label: '弹弓弹出童年的冒险', value: '弹弓弹出童年的冒险' }, { label: '毽子飞舞多彩的童年', value: '毽子飞舞多彩的童年' }, { label: '折纸飞机翱翔的梦想', value: '折纸飞机翱翔的梦想' }, { label: '娃娃陪伴童年的时光', value: '娃娃陪伴童年的时光' }, { label: '鬼脸逗乐童年的伙伴', value: '鬼脸逗乐童年的伙伴' }, { label: '早餐开启活力的一天', value: '早餐开启活力的一天' }, { label: '牙刷唤醒口腔的清爽', value: '牙刷唤醒口腔的清爽' }, { label: '公交穿梭城市的脉络', value: '公交穿梭城市的脉络' }, { label: '键盘敲出工作的节奏', value: '键盘敲出工作的节奏' }, { label: '书籍充实闲暇的午后', value: '书籍充实闲暇的午后' }, { label: '画笔勾勒日常的琐碎', value: '画笔勾勒日常的琐碎' }, { label: '单车环游城市的角落', value: '单车环游城市的角落' }, { label: '茶杯盛起温暖的慰藉', value: '茶杯盛起温暖的慰藉' }, { label: '绿植装点单调的空间', value: '绿植装点单调的空间' }, { label: '闹钟打破清晨的宁静', value: '闹钟打破清晨的宁静' }, { label: '朝阳唤醒沉睡的大地', value: '朝阳唤醒沉睡的大地' }, { label: '雨滴敲响荷叶的鼓点', value: '雨滴敲响荷叶的鼓点' }, { label: '海浪轻抚沙滩的额头', value: '海浪轻抚沙滩的额头' }, { label: '红叶点燃秋日的激情', value: '红叶点燃秋日的激情' }, { label: '繁星点亮夜空的眼眸', value: '繁星点亮夜空的眼眸' }, { label: '瀑布奏响山林的交响', value: '瀑布奏响山林的交响' }, { label: '晨雾给群山披上薄纱', value: '晨雾给群山披上薄纱' }, { label: '彩虹架起天空的桥梁', value: '彩虹架起天空的桥梁' }, { label: '海风撩动海浪的发丝', value: '海风撩动海浪的发丝' }, { label: '霜花装点冬日的窗棂', value: '霜花装点冬日的窗棂' }, { label: '回忆在心底静静沉淀', value: '回忆在心底静静沉淀' }, { label: '微笑驱散心头的阴霾', value: '微笑驱散心头的阴霾' }, { label: '拥抱传递温暖的力量', value: '拥抱传递温暖的力量' }, { label: '梦想在远方闪闪发光', value: '梦想在远方闪闪发光' }, { label: '誓言锁住永恒的承诺', value: '誓言锁住永恒的承诺' }, { label: '理解化解矛盾的坚冰', value: '理解化解矛盾的坚冰' }, { label: '陪伴给予心灵的安宁', value: '陪伴给予心灵的安宁' }, { label: '感恩让生活充满阳光', value: '感恩让生活充满阳光' }, { label: '期待像星辰照亮前路', value: '期待像星辰照亮前路' }, { label: '鼓励似春风吹绿希望', value: '鼓励似春风吹绿希望' }, { label: '蜜蜂忙碌花丛的甜蜜', value: '蜜蜂忙碌花丛的甜蜜' }, { label: '鸟儿唱响山林的晨曲', value: '鸟儿唱响山林的晨曲' }, { label: '松鼠储存冬日的食粮', value: '松鼠储存冬日的食粮' }, { label: '玫瑰绽放爱情的芬芳', value: '玫瑰绽放爱情的芬芳' }, { label: '翠竹彰显坚韧的品格', value: '翠竹彰显坚韧的品格' }, { label: '鱼儿穿梭水中的乐园', value: '鱼儿穿梭水中的乐园' }, { label: '春蚕编织希望的丝线', value: '春蚕编织希望的丝线' }, { label: '萤火虫点亮夏夜的梦境', value: '萤火虫点亮夏夜的梦境' }, { label: '蒲公英飘向未知的远方', value: '蒲公英飘向未知的远方' }, { label: '绿萝蔓延生命的活力', value: '绿萝蔓延生命的活力' }, { label: '篮球碰撞青春的火花', value: '篮球碰撞青春的火花' }, { label: '游戏闯荡虚拟的世界', value: '游戏闯荡虚拟的世界' }, { label: '歌声唤醒沉睡的耳朵', value: '歌声唤醒沉睡的耳朵' }, { label: '棋牌斗智闲暇的时光', value: '棋牌斗智闲暇的时光' }, { label: '风筝放飞儿时的梦想', value: '风筝放飞儿时的梦想' }, { label: '摄影捕捉美好的瞬间', value: '摄影捕捉美好的瞬间' }, { label: '瑜伽舒展身心的疲惫', value: '瑜伽舒展身心的疲惫' }, { label: '魔术制造神奇的惊喜', value: '魔术制造神奇的惊喜' }, { label: '故事开启想象的大门', value: '故事开启想象的大门' }, { label: '手工创造独特的价值', value: '手工创造独特的价值' }, ]
const imgLetterChkOptions = [ { label: '晨阳漫染林梢金纱飘飘', value: '晨阳漫染林梢金纱飘飘' }, { label: '雪花跳起松枝的舞蹈', value: '雪花跳起松枝的舞蹈' }, { label: '溪流蜿蜒石间的路径', value: '溪流蜿蜒石间的路径' }, { label: '樱花点亮春日的街巷', value: '樱花点亮春日的街巷' }, { label: '朝阳撕开云海的幕布', value: '朝阳撕开云海的幕布' }, { label: '柳絮飞进春日的梦里', value: '柳絮飞进春日的梦里' }, { label: '晚霞点燃天边的云彩', value: '晚霞点燃天边的云彩' }, { label: '晨露折射朝阳的光', value: '晨露折射朝阳的光' }, { label: '山风唤醒鸟儿的晨曲', value: '山风唤醒鸟儿的晨曲' }, { label: '繁花织就春日的锦缎', value: '繁花织就春日的锦缎' }, { label: '书卷气慰藉疲惫的心灵', value: '书卷气慰藉疲惫的心灵' }, { label: '相机定格美好的瞬间', value: '相机定格美好的瞬间' }, { label: '故事填满夜晚的宁静', value: '故事填满夜晚的宁静' }, { label: '心灵领悟生命的深邃', value: '心灵领悟生命的深邃' }, { label: '键盘敲击梦想的乐章', value: '键盘敲击梦想的乐章' }, { label: '阅读沉淀思想的光芒', value: '阅读沉淀思想的光芒' }, { label: '美食治愈疲惫的灵魂', value: '美食治愈疲惫的灵魂' }, { label: '冥想遇见内心的自己', value: '冥想遇见内心的自己' }, { label: '拥抱传递温暖的力量', value: '拥抱传递温暖的力量' }, { label: '思考带来成长的蜕变', value: '思考带来成长的蜕变' }, { label: '眷恋在时光里静静流淌', value: '眷恋在时光里静静流淌' }, { label: '笑容点亮甜蜜的时光', value: '笑容点亮甜蜜的时光' }, { label: '笑声传递内心的欢畅', value: '笑声传递内心的欢畅' }, { label: '相拥抵御生活的风雪', value: '相拥抵御生活的风雪' }, { label: '相册封存浪漫的回忆', value: '相册封存浪漫的回忆' }, { label: '和解修复破碎的心田', value: '和解修复破碎的心田' }, { label: '重逢在泪水中尽情绽放', value: '重逢在泪水中尽情绽放' }, { label: '回忆温暖着孤独的心房', value: '回忆温暖着孤独的心房' }, { label: '理解是最贴心的关怀', value: '理解是最贴心的关怀' }, { label: '爱情在考验中愈发深沉', value: '爱情在考验中愈发深沉' }, { label: '仙子在月光下轻歌曼舞', value: '仙子在月光下轻歌曼舞' }, { label: '凤凰在火中涅槃重生', value: '凤凰在火中涅槃重生' }, { label: '奇迹在星空中闪耀光芒', value: '奇迹在星空中闪耀光芒' }, { label: '美人鱼穿梭梦幻海底', value: '美人鱼穿梭梦幻海底' }, { label: '巨人守护古老的城堡', value: '巨人守护古老的城堡' }, { label: '奇幻之旅就此启航', value: '奇幻之旅就此启航' }, { label: '月亮编织梦幻的摇篮', value: '月亮编织梦幻的摇篮' }, { label: '南瓜马车驶向梦的远方', value: '南瓜马车驶向梦的远方' }, { label: '水晶球映照未来模样', value: '水晶球映照未来模样' }, { label: '精灵守护神秘的宝藏', value: '精灵守护神秘的宝藏' }, { label: '陀螺转出七彩的童年', value: '陀螺转出七彩的童年' }, { label: '积木搭起梦幻的城堡', value: '积木搭起梦幻的城堡' }, { label: '风车转出快乐的节奏', value: '风车转出快乐的节奏' }, { label: '滑梯滑出童年的欢笑', value: '滑梯滑出童年的欢笑' }, { label: '沙堡筑起童年的梦想', value: '沙堡筑起童年的梦想' }, { label: '跳绳跳出欢乐的节拍', value: '跳绳跳出欢乐的节拍' }, { label: '皮筋勾起童年的记忆', value: '皮筋勾起童年的记忆' }, { label: '玻璃弹珠闪烁的时光', value: '玻璃弹珠闪烁的时光' }, { label: '玩具装满童年的宝箱', value: '玩具装满童年的宝箱' }, { label: '童谣唱响童年的纯真', value: '童谣唱响童年的纯真' }, { label: '晚餐抚慰疲惫的身心', value: '晚餐抚慰疲惫的身心' }, { label: '拖鞋迎接归家的脚步', value: '拖鞋迎接归家的脚步' }, { label: '地铁驶向生活的新篇', value: '地铁驶向生活的新篇' }, { label: '鼠标点击梦想的蓝图', value: '鼠标点击梦想的蓝图' }, { label: '电影点亮周末的夜晚', value: '电影点亮周末的夜晚' }, { label: '相机定格瞬间的美好', value: '相机定格瞬间的美好' }, { label: '电梯抵达生活的高处', value: '电梯抵达生活的高处' }, { label: '酒杯装满欢聚的喜悦', value: '酒杯装满欢聚的喜悦' }, { label: '香薰营造温馨的氛围', value: '香薰营造温馨的氛围' }, { label: '晚安结束忙碌的一天', value: '晚安结束忙碌的一天' }, { label: '晚霞吻别喧嚣的世界', value: '晚霞吻别喧嚣的世界' }, { label: '雪花跳起屋顶的舞蹈', value: '雪花跳起屋顶的舞蹈' }, { label: '溪流蜿蜒山谷的脉络', value: '溪流蜿蜒山谷的脉络' }, { label: '绿芽唤醒春日的生机', value: '绿芽唤醒春日的生机' }, { label: '旭日撕开云海的衣裳', value: '旭日撕开云海的衣裳' }, { label: '泉涌诉说大地的秘密', value: '泉涌诉说大地的秘密' }, { label: '夕照为湖面镀上金辉', value: '夕照为湖面镀上金辉' }, { label: '闪电划破黑夜的幕布', value: '闪电划破黑夜的幕布' }, { label: '山风梳理森林的毛发', value: '山风梳理森林的毛发' }, { label: '春花点亮春日的庭院', value: '春花点亮春日的庭院' }, { label: '希望在心中悄悄萌芽', value: '希望在心中悄悄萌芽' }, { label: '眼泪释放内心的委屈', value: '眼泪释放内心的委屈' }, { label: '离别刺痛思念的神经', value: '离别刺痛思念的神经' }, { label: '现实在脚下慢慢沉淀', value: '现实在脚下慢慢沉淀' }, { label: '时间冲淡曾经的伤痛', value: '时间冲淡曾经的伤痛' }, { label: '误会点燃争吵的战火', value: '误会点燃争吵的战火' }, { label: '孤独侵蚀内心的防线', value: '孤独侵蚀内心的防线' }, { label: '抱怨使心情布满阴霾', value: '抱怨使心情布满阴霾' }, { label: '失望如乌云遮蔽心灵', value: '失望如乌云遮蔽心灵' }, { label: '嘲讽如寒刀刺痛梦想', value: '嘲讽如寒刀刺痛梦想' }, { label: '蝴蝶舞动春日的浪漫', value: '蝴蝶舞动春日的浪漫' }, { label: '蝉儿吟诵夏日的乐章', value: '蝉儿吟诵夏日的乐章' }, { label: '蚂蚁构筑地下的王国', value: '蚂蚁构筑地下的王国' }, { label: '百合散发纯洁的光芒', value: '百合散发纯洁的光芒' }, { label: '红梅傲雪不屈的精神', value: '红梅傲雪不屈的精神' }, { label: '蜻蜓点破湖面的平静', value: '蜻蜓点破湖面的平静' }, { label: '秋蝉奏响生命的绝唱', value: '秋蝉奏响生命的绝唱' }, { label: '猫头鹰守护森林的秘密', value: '猫头鹰守护森林的秘密' }, { label: '向日葵追逐太阳的光芒', value: '向日葵追逐太阳的光芒' }, { label: '昙花演绎瞬间的绝美', value: '昙花演绎瞬间的绝美' }, { label: '足球滚动梦想的激情', value: '足球滚动梦想的激情' }, { label: '旅行探索真实的天地', value: '旅行探索真实的天地' }, { label: '舞蹈点燃火热的激情', value: '舞蹈点燃火热的激情' }, { label: '轮滑飞驰自由的感觉', value: '轮滑飞驰自由的感觉' }, { label: '泡泡承载童年的欢乐', value: '泡泡承载童年的欢乐' }, { label: '绘画描绘心中的世界', value: '绘画描绘心中的世界' }, { label: '太极领悟生命的奥秘', value: '太极领悟生命的奥秘' }, { label: '杂技挑战极限的精彩', value: '杂技挑战极限的精彩' }, { label: '笑话带来欢乐的氛围', value: '笑话带来欢乐的氛围' }, { label: '观影感受别样的人生', value: '观影感受别样的人生' }, ]
const active = ref(false)
const isShowPhotoList = ref(true)
const formInputSize = ref<'small' | 'medium' | 'large'>('medium')
const imgTagsValues = ref<string[]>([]) // 如果是多选 multiple 
const uploadMemeryForm = reactive({
    id: '',             // 唯一ID
    imgTitle: '',       // 图片标题 *
    ingDescription: '', // 图片描述
    imgTags: '',        // 图片标签 * 
    imgLetterUnchk: '', // 图片文案未选择 *
    imgLetterChk: '',   // 图片文案已选择 *
    imgLike: 0,        // 图片点赞数
    imgComment: 0,     // 图片评论数
    imgScan: 0,        // 图片浏览数
    imgMinioRrl: '',    // 图片minio链接
    imgFreezeOrnnt: 0, // 是否冻结 0 正常 1 冻结
    imgShowedRole: '',  // 可查看角色 可以是多个角色
    imgRecordTm: '',    // 收录时间
    imgUpdateTm: '',    // 上传时间
    avatarBase64: '',   // 图片Base64
    pageSize: 1, 
    currentPage: 1,
})
const rules: FormRules = {
  imgTitle: [ { required: true, message: '请输入图片标题',trigger: ['input', 'blur'] } ],
  imgLetterUnchk: [ { required: true, message: '请选择文案',trigger: ['input', 'blur'] } ],
  imgLetterChk: [ { required: true, message: '请选择文案',trigger: ['input', 'blur'] } ],
}
const imgTagOptions = [
  { label: '家乡', value: '家乡' },
  { label: '我', value: '我' },
  { label: '兄弟姐妹', value: '兄弟姐妹' },
  { label: '外甥', value: '外甥' },
  { label: '六个核蛋', value: '六个核蛋' },
  { label: '日常', value: '日常' },
  { label: 'GirlFriend', value: 'GirlFriend' },
  { label: '大学', value: '大学' },
]
const selectedValue = ref(null)
const userdata = reactive({
  across_num: '',
  avatarBase64: '',
  avatar_url: '',
  create_tm: '',
  email: '',
  encrypt_pwd: '',
  encryption_algorithm: '',
  freeze_ornnt: '',
  id: '',
  role_num: '',
  tel_num: '',
  update_tm: '',
  username: '',
  wechat_abt: '',
})


// 选项卡配置数据
const tabs = ref([
  { name: 'NothingHere', label: 'NothingHere', tooltip: '没什么内容', content: '没什么内容'},
])
const tabsData = ref([
  { name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'},
  { name: 'Me', label: 'Me', tooltip: '我', content: '我自己'},
  { name: 'BroAsis', label: 'BroAsis', tooltip: '兄弟姐妹', content: '兄弟姐妹'},
  { name: 'Cousins', label: 'Cousins', tooltip: '外甥', content: '外甥'},
  { name: 'OldSix', label: 'OldSix', tooltip: '六个核蛋', content: '六个核蛋'},
  { name: 'Daily', label: 'Daily', tooltip: '日常', content: '日常'},
  { name: 'She', label: 'She', tooltip: 'GirlFriend', content: '我和我的女朋友'},
  { name: 'College', label: 'College', tooltip: '大学', content: '大学'},
  { name: 'UPLOAD', label: 'UPLOAD', tooltip: '上传', content: '上传'},
])

const isShowUploadDrawRight = () => {
  active.value = true
}



const formRef = ref<FormInst | null>(null)
const timeCount = ref(0)
const intervalId = ref(null)
const duration = 10000 // 10秒
const isDrawerLoading = ref(false); // 右侧抽屉 loading 加载状态
// 高精度计时器实现
const startTimer = () => {
  let lastTime = performance.now();
  // @ts-ignore
  intervalId.value = setInterval(() => {
    const now = performance.now();
    // 降低进度增长速度为0.5%/20ms (原为2%)
    // @ts-ignore
    if (now - lastTime >= 20 && avatarFiles.value[0].percentage < 100) {
      timeCount.value++;
      avatarFiles.value[0].percentage = Math.min(
        // @ts-ignore
        avatarFiles.value[0].percentage + 0.5, 
        100 // 最大值限制
      );
      lastTime = now;
    }
  }, 20);
}
// 停止计时器
const stopTimer = () => {
  if (intervalId.value) {
    clearInterval(intervalId.value)
    intervalId.value = null
  }
}
const uploadImg = async (e: MouseEvent) => {
  e.preventDefault()
  // 将回调函数改为async函数
  const validateResult = await new Promise<boolean>((resolve) => {
    formRef.value?.validate(errors => {
      resolve(!errors);
    });
  });

  console.log(123)
  if (!validateResult) {
    message.error('表单不完整！');
    return;
  } else {
    // 检查文件是否存在
    if (!avatarFiles.value[0]?.file) {
      message.error("请先选择图片")
      return
    }
    ////console.log("avatarFiles.value",avatarFiles.value)

    // 校验文件后缀 ----------------------------------------------------------------------------------------
    const saveSuffix = [
      'bmp','jpg','JPG','png','tif','gif','jpeg','pcx','tga','exif','fpx','svg','psd',
      'cdr','pcd','dxf','ufo','eps','ai','raw','WMF','webp','avif','apng','heic'
    ];
    const saveSuffixSet = ref(new Set(saveSuffix)); 
    const lastDotIndex = avatarFiles.value[0].file.name.lastIndexOf('.'); // 最后一个点 index
    const fileSuffix =  (lastDotIndex > 0) ? avatarFiles.value[0].file.name.substring(lastDotIndex + 1) : '';
    ////console.log("文件是否为安全后缀 -- fileSuffix",fileSuffix)
    if (!saveSuffixSet.value.has(fileSuffix)) {
      message.error("请上传安全的头像文件!");
      avatarFiles.value = [];
      return;
    }
    // -----------------------------------------------------------------------------------------------------

    // 文件名生成逻辑 --------------------------------------------------------
    const originalFile = avatarFiles.value[0].file as File;
    const fileExtension = originalFile.name.split('.').pop() || 'png';
    // 生成唯一的文件名
    const sanitizedName = generateUniqueName(fileExtension,uploadMemeryForm.imgTitle);
    // 创建新文件对象
    const modifiedFile = new File([originalFile], sanitizedName, { type: originalFile.type});
    // 更新上传文件引用
    avatarFiles.value[0].file = modifiedFile;
    avatarFiles.value[0].name = sanitizedName;
    // ------------------------------------------------------------------------

    ////console.log("上传图片 FORM uploadMemeryForm",uploadMemeryForm)
    // 传递给后端的参数绑定
    ////console.log("imgTagsValues.value",imgTagsValues.value)
    // imgTagsValues.value.map((item) => {
    //   uploadMemeryForm.imgTags += item + ','
    // })
    uploadMemeryForm.imgTags = imgTagsValues.value.toString()
    let formData = {...uploadMemeryForm}
    

    
    // 显示上传进度
    avatarFiles.value[0].status = 'uploading';
    // avatarFiles.value[0].percentage = 10;
    startTimer()
    setTimeout(() => { 
      stopTimer()
    }, duration)// 10 秒后自动停止
    // showloading.value = true

    try {
      isDrawerLoading.value = true

      // 添加await并捕获异常
      const res = await request.upload<{ url: string }>(
        "/dragon/uploadMemery",
        avatarFiles.value[0].file,
        formData, // 可添加额外参数
        {
          headers: { 'X-Upload-Type': 'imgFile' },
          timeout: 600000 // 10分钟超时
        },
        { fieldName: 'imgFile' } // 和后端 @RequestParam 名称保持一致
      );
      // 添加结果处理逻辑
      if (res.code === 200) {
        ////console.log("图片上传返回值 200 res", res);
        message.success("上传成功!");
        avatarFiles.value[0].status = 'finished';
        const empty = {
          id: '',imgTitle: '',ingDescription: '',imgTags: '',imgLetterUnchk: '',imgLetterChk: '',
          imgLike: 0,imgComment: 0,imgScan: 0,imgMinioRrl: '',imgFreezeOrnnt: 0,imgShowedRole: '',
          imgRecordTm: '',imgUpdateTm: '',avatarBase64: '',pageSize: 1, currentPage: 1,}
          Object.assign(uploadMemeryForm, empty); // 清空表单
          avatarFiles.value = []; // 清空文件列表
          imgTagsValues.value = []; // 清空选中的标签
          active.value = false
          isShowPhotoList.value = false
      } else {
        throw new Error(res.msg || '上传失败');
      }
    } catch (error) {
      // @ts-ignore
      if (axios.isAxiosError(error)) {
        // @ts-ignore
         if (error.code === 'ECONNABORTED') {
          message.error("上传超时，请检查网络后重试");
          // @ts-ignore
        } else if (error.response?.status === 500) {
          message.error("服务器处理文件超时，请尝试压缩图片");
        }
      }
      avatarFiles.value[0].status = 'error';
    } finally {
      stopTimer();
      isDrawerLoading.value = false
    }
  }

}



const isUploadAvatarDone = ref(false); //头像是否上传成功
const avatarFiles = ref<UploadFileInfo[]>([]);
const showloading = ref(false);
// 文件状态变化处理
// const handleFileChange = (options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => {
//   avatarFiles.value = options.fileList;
// };
const handleFileChange = (options: { file: UploadFileInfo, fileList: UploadFileInfo[] }) => {
  avatarFiles.value = options.fileList;
};

// 独立生成器函数
function generateUniqueName(ext: string, username: string) {
  const timestamp = (Date.now() - new Date('2020-01-01').getTime())
    .toString(36)
    .toUpperCase();
  const randomPart = Math.random().toString(36).slice(2, 8);
  return `${username}_${timestamp}_${randomPart}.${ext}`;
  // return `${username}.${ext}`;
}

// 删除处理（完整版）
const handleRemove = async (options: { file: UploadFileInfo }) => {
  try {
    // 调用后端删除接口
    // await request.delete('/dragon/deleteAvatar', {
    //   params: { url: options.file.url }
    // });

    // 更新数据
    isUploadAvatarDone.value = false;
    avatarFiles.value = [];
    // registerObj.uUploadavator_url = '';
    message.info('头像已删除');
  } catch (error) {
    message.error(`删除失败: ${(error as Error).message}`);
  }
};


interface ImageData {
  id: string;
  imgTitle: string;
  ingDescription: string;
  imgTags: string;
  imgLetterUnchk: string;
  imgLetterChk: string;
  imgLike: number;
  imgComment: number;
  imgScan: number;
  imgMinioRrl: string;
  imgFreezeOrnnt: number;
  imgShowedRole: string;
  imgRecordTm: string;
  imgUpdateTm: string;
  avatarBase64: string;
  pageSize: number; 
  currentPage: number;
  imgIsChk: number;
}
 // IOS端显示的图片数据
const iosImgData = ref<ImageData[]>([])
// 浏览器端显示的图片数据 声明为 ImageData 数组类型
const pcImgData = ref<ImageData[]>([])  
const pcImgDataTotal = ref(0) // 浏览器端图片数据总数
const getImgListData = async () => {
  loadingMemeryMask.value = true
  try {
    const res = await request.post("/dragon/getMemeryList",{imgTitle:'123'});
    if (res.code && res.code == 200){
      pcImgData.value = res.data
      iosImgData.value = res.data; // 手机端数据
      pcImgData.value = res.data; // 浏览器端数据
      ////console.log("pcImgData.value",pcImgData.value)
      pcImgDataTotal.value = res.data.length
      nextTick(() => {
        // 强制重新渲染轮播图
        isShowPhotoList.value = false
        //setTimeout(() => isShowPhotoList.value = true, 100)
      })
      loadingMemeryMask.value = false
      //message.success("回 忆 检 索 成 功 ！");
    }
  } catch (err) {
    console.error((err as Error).message);
  }

}

// 切换轮播拼图的时候的index获取
const currentCarouselIndex = ref(0);
const handleIndexChange = (newIndex: number) => {
  //console.log("handleIndexChange")
  currentCarouselIndex.value = newIndex;
  ////console.log('当前索引:', currentCarouselIndex.value, '总数:', pcImgData.value.length);
  // if (currentCarouselIndex.value === pcImgData.value.length - 1) {
  //   getMemerysByTab(iosCurrentPage.value, iosPageSize.value)
  //   iosCurrentPage.value += 1
  // }
};


const handleCarouselChange = (currentIndex: number) => {
  ////console.log("currentIndex",currentIndex)
  // 增加数据非空校验，避免length为0时出错
  if (pcImgData.value.length > 0 && currentIndex === pcImgData.value.length - 1) {
    handleEndOfCarousel();
  }
};

const handleEndOfCarousel = () => {
  message.success('到达轮播图最后一张');
  // getMorePcImages();
};

const handleMobileScrollEnd = () => {
  // 移动端滚动到底部逻辑
  //message.success('移动端滚动到底部，加载更多内容');
  // loadMoreMobileArticles();
  getMemerysByTab(iosCurrentPage.value, iosPageSize.value)
  iosCurrentPage.value += 1
  ////console.log("iosImgData.value",iosImgData.value)
};

// 浏览器滚动监听
const isScrollListenerAdded = ref(false); // 是否添加了滚动监听

onMounted(() => {
  if (!isScrollListenerAdded.value) {
    window.addEventListener('scroll', handleBrowserScrollEnd);
    isScrollListenerAdded.value = true;
  }
});

onUnmounted(() => {
  if (isScrollListenerAdded.value) {
    window.removeEventListener('scroll', handleBrowserScrollEnd);
    isScrollListenerAdded.value = false;
  }
});

const handleBrowserScrollEnd = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  
  if (scrollTop + windowHeight >= documentHeight - 50) { // 50px容错
    handleGlobalScrollEnd();
  }
};

const handleGlobalScrollEnd = () => {
  // 全局滚动到底部逻辑
  message.info('页面已滚动到底部');
  // loadMoreGlobalContent();
};


const count = ref(10)
const handleLoad = () => {
  count.value += 1
}

const currentTabInfo = reactive({ name: '', label: '', tooltip: '', content: ''})
const imgShowedRoleValueByTab = ref('')
// 当点击 TAB 的时候
const handleTabClick = (e: any) => {
  // // 切换TAB就清空数据重新查
  // iosImgData.value = []
  // pcImgData.value = []
  // iosCurrentPage.value = 1

  // const targetTab = tabsData.value.find(t => t.name === activeTab.value)
  // //console.log('当前激活标签:', targetTab)
  // Object.assign(currentTabInfo, targetTab)
  // console.log("currentTabInfo",currentTabInfo)
  // // @ts-ignore
  // if (targetTab.label == 'UPLOAD') {
  //   active.value = true; // 是否打开抽屉
  //   isShowPhotoList.value = false; // 
  // } else {
  //   active.value = false
  //   isShowPhotoList.value = true
  // }

  // // 获取之前先先检查是否登录
  // // activeTab.value = 'Me'
  // // @ts-ignore
  // if (targetTab.label == 'HomeTown') imgShowedRoleValueByTab.value = '1'
  // // @ts-ignore
  // if (targetTab.label == 'Me') imgShowedRoleValueByTab.value = '2'
  // // @ts-ignore
  // if (targetTab.label == 'BroAsis') imgShowedRoleValueByTab.value = '3'
  // // @ts-ignore
  // if (targetTab.label == 'Cousins') imgShowedRoleValueByTab.value = '4'
  // // @ts-ignore
  // if (targetTab.label == 'OldSix') imgShowedRoleValueByTab.value = '5'
  // // @ts-ignore
  // if (targetTab.label == 'Daily') imgShowedRoleValueByTab.value = '6'
  // // @ts-ignore
  // if (targetTab.label == 'She') imgShowedRoleValueByTab.value = '7'
  // // @ts-ignore
  // if (targetTab.label == 'College') imgShowedRoleValueByTab.value = '8'
  // getMemerysByTab(iosCurrentPage.value, iosPageSize.value)
  // iosCurrentPage.value += 1
}

const iosCurrentPage = ref(1)
const iosPageSize = ref(10)
const getMemerysByTab = async (currentPage: number, pageSize: number) => {
  loadingMemeryMask.value = true
  try {
    const res = await request.post(
      "/dragon/getMemeryListByTab",
      { 
        imgShowedRole: imgShowedRoleValueByTab.value,
        currentPage: currentPage,
        pageSize: pageSize,
      }
    );
    if (res.code && res.code == 200){
      iosImgData.value = [...iosImgData.value,...res.data]
      pcImgData.value = [...pcImgData.value,...res.data]
      loadingMemeryMask.value = false
      //message.success("回 忆 检 索 成 功 ！");
      //console.log(`检索参数:imgShowedRoleValueByTab=${imgShowedRoleValueByTab.value}, currentPage=${currentPage}, pageSize=${pageSize}`)
      //console.log("检索结果 getMemerysByTab",iosImgData.value)

    } else {
      loadingMemeryMask.value = false
    }
  } catch (err) {
    loadingMemeryMask.value = false
    console.error((err as Error).message);
  }

}



// 控制弹窗显示隐藏的变量
const dialogVisible = ref(false);
const showDialog = () => {
  dialogVisible.value = true;
};
// TAB 切换
const activeTab = ref('HomeTown');
const handleTabChange = (value: string) => {
  if (value === 'UPLOAD') {
    showDialog();
  }

  // 切换TAB就清空数据重新查
  iosImgData.value = []
  pcImgData.value = []
  iosCurrentPage.value = 1

  const targetTab = tabsData.value.find(t => t.name === activeTab.value)
  //console.log('当前激活标签:', targetTab)
  Object.assign(currentTabInfo, targetTab)
  console.log("currentTabInfo",currentTabInfo)
  // @ts-ignore
  if (targetTab.label == 'UPLOAD') {
    active.value = true; // 是否打开抽屉
    isShowPhotoList.value = false; // 
  } else {
    active.value = false
    isShowPhotoList.value = true
  }

  // 获取之前先先检查是否登录
  // activeTab.value = 'Me'
  // @ts-ignore
  if (targetTab.label == 'HomeTown') imgShowedRoleValueByTab.value = '1'
  // @ts-ignore
  if (targetTab.label == 'Me') imgShowedRoleValueByTab.value = '2'
  // @ts-ignore
  if (targetTab.label == 'BroAsis') imgShowedRoleValueByTab.value = '3'
  // @ts-ignore
  if (targetTab.label == 'Cousins') imgShowedRoleValueByTab.value = '4'
  // @ts-ignore
  if (targetTab.label == 'OldSix') imgShowedRoleValueByTab.value = '5'
  // @ts-ignore
  if (targetTab.label == 'Daily') imgShowedRoleValueByTab.value = '6'
  // @ts-ignore
  if (targetTab.label == 'She') imgShowedRoleValueByTab.value = '7'
  // @ts-ignore
  if (targetTab.label == 'College') imgShowedRoleValueByTab.value = '8'
  getMemerysByTab(iosCurrentPage.value, iosPageSize.value)
  iosCurrentPage.value += 1
};


const handleNegativeClick = () => {
  message.warning('取消')
}
const handlePositiveClick = () => {
  message.success('确认')
}



onMounted(() => {
  // @ts-ignore
  userdata.across_num = userInfo._object.userInfo.across_num
  // @ts-ignore
  userdata.avatarBase64 = userInfo._object.userInfo.avatarBase64
  // @ts-ignore
  userdata.avatar_url = userInfo._object.userInfo.avatar_url
  // @ts-ignore
  userdata.create_tm = userInfo._object.userInfo.create_tm
  // @ts-ignore
  userdata.email = userInfo._object.userInfo.email
  // @ts-ignore
  userdata.encrypt_pwd = userInfo._object.userInfo.encrypt_pwd
  // @ts-ignore
  userdata.encryption_algorithm = userInfo._object.userInfo.encryption_algorithm
  // @ts-ignore
  userdata.freeze_ornnt = userInfo._object.userInfo.freeze_ornnt
  // @ts-ignore
  userdata.id = userInfo._object.userInfo.id
  // @ts-ignore
  userdata.role_num = userInfo._object.userInfo.role_num
  // @ts-ignore
  userdata.tel_num = userInfo._object.userInfo.tel_num
  // @ts-ignore
  userdata.update_tm = userInfo._object.userInfo.update_tm
  // @ts-ignore
  userdata.username = userInfo._object.userInfo.username
  // @ts-ignore
  userdata.wechat_abt = userInfo._object.userInfo.wechat_abt
})

onMounted(() => {
  // 根据权限给出 tabs 的 options 的内容
  activeTab.value = 'NothingHere'
  // 先判断是否登录
  const {role_num,} = userdata
  if (userdata && userdata.username !== undefined && userdata.username !== '') {
    

    // 最高管理员 可查看所有
    ////console.log(role_num)
    if (role_num === '999') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'She'
      tabs.value.push({ name: 'She', label: 'She', tooltip: 'GirlFriend', content: '我和我的女朋友'})
      tabs.value.push({ name: 'Cousins', label: 'Cousins', tooltip: '外甥', content: '外甥'})
      tabs.value.push({ name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'})
      tabs.value.push({ name: 'Me', label: 'Me', tooltip: '我', content: '我自己'})
      tabs.value.push({ name: 'BroAsis', label: 'BroAsis', tooltip: '兄弟姐妹', content: '兄弟姐妹'})
      tabs.value.push({ name: 'OldSix', label: 'OldSix', tooltip: '六个核蛋', content: '六个核蛋'})
      tabs.value.push({ name: 'Daily', label: 'Daily', tooltip: '日常', content: '日常'})
      tabs.value.push({ name: 'College', label: 'College', tooltip: '大学', content: '大学'})
      // tabs.value.push({ name: 'UPLOAD', label: 'UPLOAD', tooltip: '上传', content: '上传'})
    }
    // 同学 = 111   
    if (role_num === '111') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'OldSix'
      tabs.value.push({ name: 'OldSix', label: 'OldSix', tooltip: '六个核蛋', content: '六个核蛋'})
      tabs.value.push({ name: 'College', label: 'College', tooltip: '大学', content: '大学'})
      tabs.value.push({ name: 'Me', label: 'Me', tooltip: '我', content: '我自己'})
      // tabs.value.push({ name: 'UPLOAD', label: 'UPLOAD', tooltip: '上传', content: '上传'})
    }
    // 同事 = 222   
    if (role_num === '222') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'HomeTown'
      tabs.value.push({ name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'})
    }
    // 好基友 = 333   
    if (role_num === '333') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'HomeTown'
      tabs.value.push({ name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'})
      tabs.value.push({ name: 'Me', label: 'Me', tooltip: '我', content: '我自己'})
      tabs.value.push({ name: 'Daily', label: 'Daily', tooltip: '日常', content: '日常'})
      // tabs.value.push({ name: 'UPLOAD', label: 'UPLOAD', tooltip: '上传', content: '上传'})
    }
    // 朋友 = 444   
    if (role_num === '444') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'HomeTown'
      tabs.value.push({ name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'})
    }
    // 家人 = 666   
    if (role_num === '666') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'Cousins'
      tabs.value.push({ name: 'Cousins', label: 'Cousins', tooltip: '外甥', content: '外甥'})
      tabs.value.push({ name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'})
      tabs.value.push({ name: 'Me', label: 'Me', tooltip: '我', content: '我自己'})
      tabs.value.push({ name: 'BroAsis', label: 'BroAsis', tooltip: '兄弟姐妹', content: '兄弟姐妹'})
      tabs.value.push({ name: 'Daily', label: 'Daily', tooltip: '日常', content: '日常'})
      tabs.value.push({ name: 'College', label: 'College', tooltip: '大学', content: '大学'})
      // tabs.value.push({ name: 'UPLOAD', label: 'UPLOAD', tooltip: '上传', content: '上传'})
    }
    // AMIN = 888   
    if (role_num === '888') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'She'
      tabs.value.push({ name: 'She', label: 'She', tooltip: 'GirlFriend', content: '我和我的女朋友'})
      tabs.value.push({ name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'})
      tabs.value.push({ name: 'Me', label: 'Me', tooltip: '我', content: '我自己'})
      tabs.value.push({ name: 'BroAsis', label: 'BroAsis', tooltip: '兄弟姐妹', content: '兄弟姐妹'})
      tabs.value.push({ name: 'Cousins', label: 'Cousins', tooltip: '外甥', content: '外甥'})
      tabs.value.push({ name: 'OldSix', label: 'OldSix', tooltip: '六个核蛋', content: '六个核蛋'})
      tabs.value.push({ name: 'Daily', label: 'Daily', tooltip: '日常', content: '日常'})
      tabs.value.push({ name: 'College', label: 'College', tooltip: '大学', content: '大学'})
      // tabs.value.push({ name: 'UPLOAD', label: 'UPLOAD', tooltip: '上传', content: '上传'})
    }
    // 兄弟姐妹 = 000   
    if (role_num === '000') {
      tabs.value.pop(); //先删除默认的
      activeTab.value = 'BroAsis'
      tabs.value.push({ name: 'BroAsis', label: 'BroAsis', tooltip: '兄弟姐妹', content: '兄弟姐妹'})
      tabs.value.push({ name: 'HomeTown', label: 'HomeTown', tooltip: '我的家乡', content: '我的家乡'})
      tabs.value.push({ name: 'Cousins', label: 'Cousins', tooltip: '外甥', content: '外甥'})
    }           
    
  }
  

})


// 回忆录图片描述失去焦点回调
const handleImgBlur = () => {
  //console.log("失去焦点了")
  //console.log("uploadMemeryForm",uploadMemeryForm)
  if (uploadMemeryForm.ingDescription === '') {
    message.warning('请输入图片描述')
  }
}

</script>

<style lang="scss" scoped>
// ----------------------------------------------------------------------
// 调整抽屉里面 图片显示的大小 无论上有没有选择图片都显示相同的大小
:deep(.n-upload) {
  // 上传触发区（未选择文件时的拖拽区域）
  .n-upload-trigger.n-upload-trigger--image-card {
    width: 430px !important;
    height: 430px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
  }

  // 已上传文件的显示区域（选择文件后的图片容器）
  .n-upload-file-list {
    .n-upload-file {
      width: 430px !important;  // 强制宽度
      height: 430px !important; // 强制高度

      // 覆盖 naive-ui 的默认图片样式
      .n-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; // 保持图片填充
      }
    }
  }
}
// ----------------------------------------------------------------------






.mobile-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px;

  :deep(.n-infinite-scroll) {
    flex: 1;
    height: 100% !important;
  }
}

/* 调整PC端轮播图高度 */
.n-carousel {
  height: 80vh;
  max-height: 800px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .mobile-card {
    height: 55vh;
    min-height: 250px;
  }
  
  .mobile-content {
    padding: 0;
    overflow-x: auto;
  }
}
.mobile-card {
  height: 60vh; /* 卡片占可视高度的60% */
  min-height: 300px;
  margin-bottom: 12px;
  
  :deep(.n-card__content) {
    height: 100%;
    padding: 0;
  }
}

.mobile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.grid-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  // overflow: hidden;

  :deep(.n-grid) {
    height: 100%;
  }
}

.main-content {
  height: 100vh;
  display: flex;
  flex-direction: column;

  :deep(.n-card__content) {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

.full-height-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  // width: 100%;

  // :deep(.n-tabs-nav) {
  //   position: sticky;
  //   top: 0;
  //   z-index: 1000;
  //   flex-shrink: 1;
  //   width: 100%;
  //   background: rgba(247, 246, 246, 0.327);
  //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  // }

  // :deep(.n-tabs-pane-wrapper) {
  //   flex: 1;
  //   min-height: 0;
  //   display: flex;
  //   overflow-y: auto;
  //   padding-top: var(--n-tabs-nav-height);
  //   // -webkit-overflow-scrolling: touch; /* 增强移动端滚动顺滑度 */
  //   // will-change: scroll-position; /* 提示浏览器该元素的滚动位置会改变，优化性能 */
  //   // @extend %hide-scrollbar;
  //   // padding-bottom: env(safe-area-inset-bottom);
  // }

  // :deep(.n-tab-pane) {
  //   flex: 1;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // }
}

.content-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.sidebar {
  height: 100%;
  overflow-y: auto;
}

.scroll-wrapper {
  // height: calc(100vh - 120px); // 根据实际header高度调整
  // overflow-y: auto;
  // padding: 8px;
  // // -webkit-overflow-scrolling: touch; /* 增强移动端滚动顺滑度 */
  // // will-change: scroll-position; /* 提示浏览器该元素的滚动位置会改变，优化性能 */
  min-height: 100%;
  padding-bottom: 20px;
}

/* 响应式断点处理 */
@media (max-width: 768px) {
  .full-height-tabs {
    :deep(.n-tabs-nav) {
      overflow-x: auto;
      width: calc(100% + 16px);  /* 解决滚动条遮挡问题 */
      margin-left: -8px;
      padding-left: 8px;
      // -webkit-overflow-scrolling: touch; /* 启用弹性滚动 */
      
      :deep(.n-tab) {
        white-space: nowrap;
        padding: 0 12px;
        min-width: 80px;
      }
    }
  }
}

:deep(.n-tabs-nav::-webkit-scrollbar) {
  height: 6px;
  background-color: #f5f5f5;
}

:deep(.n-tabs-nav::-webkit-scrollbar-thumb) {
  background-color: #aaa;
  border-radius: 3px;
}

// 隐藏所有tab-pane的默认滚动条
:deep(.n-tabs-pane) {
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent;
  }
  
  -ms-overflow-style: none;  // IE/Edge
  scrollbar-width: none;    // Firefox
}

// 移动端滚动容器特殊处理
// .scroll-wrapper {
//   @extend %hide-scrollbar;
//   overflow-y: auto !important;  // 保持滚动功能

//   // 动态高度计算（预留tab栏高度）
//   height: calc(100vh - 120px - var(--n-tab-height));
  
//   // 弹性滚动（iOS优化）
//   // -webkit-overflow-scrolling: touch;
  
//   // 防止内容截断
//   padding-bottom: env(safe-area-inset-bottom);
// }

// 定义隐藏滚动条的混合宏
%hide-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}

// =========滚动条样式
// 全局自定义滚动条（仅作用于允许滚动的区域）
:deep(.custom-scroll) {
  $thumb-color: rgba(144, 147, 153, 0.5);
  $track-color: rgba(255, 255, 255, 0.1);
  
  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: var(--n-color); 
    border-radius: 4px;
  }

  // 滚动条滑块
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
    
    &:hover {
      background: rgba(144, 147, 153, 0.8);
    }
  }

  // 横向滚动条
  &::-webkit-scrollbar:horizontal {
    height: 10px;
  }

  // 纵向滚动条
  &::-webkit-scrollbar:vertical {
    width: 10px;
  }

  // 暗色模式适配
  @media (prefers-color-scheme: dark) {
    $thumb-color: rgba(101, 104, 109, 0.6);
    $track-color: rgba(0, 0, 0, 0.3);
    
    &::-webkit-scrollbar-track {
      background: $track-color;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $thumb-color;
    }
  }
}
// =========滚动条样式
/**
<!-- 移动端滚动容器 -->
<div class="scroll-wrapper custom-scroll">
  <!-- 文章列表 -->
</div>

<!-- PC端内容容器 -->
<div class="pc-content custom-scroll">
  <!-- 轮播图等内容 -->
</div>
*/








// 浏览器端显示
/* 添加新样式 */
.centered-carousel {
  max-width: 1200px; /* 最大显示宽度 */
  margin: 0 auto; /* 水平居中 */
  position: relative; /* 作为箭头定位参考 */
  height: 80vh; /* 保持原有高度 */
}

.custom-arrow {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中校准 */
  width: 100%; /* 占据轮播图宽度 */
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 左右分布 */
  padding: 0 40px; /* 箭头距离边缘的距离 */
}

.custom-arrow--left, 
.custom-arrow--right {
  background: rgba(123, 60, 144, 0.469); /* 半透明背景 */
  border-radius: 50%; /* 圆形按钮 */
  width: 48px; /* 按钮大小 */
  height: 48px;
  margin-right: 78px;
  display: flex; /* 内部图标居中 */
  justify-content: center;
  align-items: center;
  transition: background 0.3s; /* 过渡效果 */
}

.custom-arrow--left:hover, 
.custom-arrow--right:hover {
  background: rgba(2, 140, 246, 0.5); /* 悬停效果 */
}

.carousel-img {
  width: 100%; /* 图片充满容器 */
  height: 70vh;
  object-fit: contain; /* 保持图片比例 */
}

/* 自定义圆点样式（保持原有逻辑，但确保唯一） */
.custom-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  list-style: none; /* 清除列表默认样式 */
  padding: 0; /* 清除默认内边距 */
}

.custom-dots li {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
  border: none; /* 清除可能的默认边框 */
  outline: none; /* 清除聚焦轮廓 */
}

.custom-dots li.is-active {
  background: #ffffff;
}

/* 隐藏Naive UI原生圆点 */
:deep(.n-carousel-dots) {
  display: none !important;
}


.upload-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.485);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

/* 高度计算优化 */
.content-container {
  height: calc(100vh - 120px); /* 根据实际header高度调整 */
  overflow-y: auto;
}


.no-border-input .n-input {
  --n-border: none !important;  /* 去除默认边框 */
  --n-border-hover: none !important;  /* 去除悬停边框 */
  --n-border-focus: none !important;  /* 去除聚焦边框 */
}
</style>
